<template>
  <view class="admin-add-category-page">
    <view class="page-header">
      <view class="header-left">
        <view class="back-btn" @click="navigateBack">
          <view class="icon icon-arrow-left" style="font-size: 20px;">‹</view>
          <text class="header-title">新增分类</text>
        </view>
      </view>
    </view>
    
    <view class="add-form">
      <!-- 分类名称 -->
      <view class="form-item">
        <text class="label">分类名称</text>
        <input 
          v-model="categoryName" 
          type="text" 
          placeholder="请输入分类名称" 
          class="form-input"
          maxlength="20"
          @confirm="addCategory"
        />
        <text class="char-count">{{ categoryName.length }}/20</text>
      </view> 
	  <view class="form-item">
        <text class="label">分类序号</text>
        <input 
          v-model="sort" 
          type="text" 
          placeholder="请输入分类序号" 
          class="form-input"
        />
        
      </view>
      
      <!-- 分类图标 -->
      <view class="form-item">
        <text class="label">分类图标</text>
        <view class="icon-grid">
          <view 
            v-for="icon in iconOptions" 
            :key="icon" 
            class="icon-item"
            :class="{ active: selectedIcon === icon }"
            @click="selectIcon(icon)"
          >
            <view class="icon" style="font-size: 32px;">{{ icon }}</view>
          </view>
        </view>
      </view>
      
      <!-- 添加按钮 -->
      <button 
        class="add-btn" 
        type="primary" 
        :disabled="!canAdd || isSubmitting"
        @click="addCategory"
      >
        {{ isSubmitting ? '提交中...' : '添加分类' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import {onLoad} from "@dcloudio/uni-app"

// 状态管理
const categoryName = ref('');
const sort = ref(1);
const selectedIcon = ref('📊');
const isSubmitting = ref(false);

// 可选图标
const iconOptions = ref([
  '📊', '🖼️', '🏞️', '🏙️','💻',
   '🚗', '🚀', '🌺', '🐶', '💃',
    '🕺','🛸',' 🚁', '🎭', '📱'
]);

// 计算属性
const canAdd = computed(() => {
  return categoryName.value.trim().length > 0;
});

// 生命周期 - 已移除管理员权限校验
onLoad(() => {
  // 移除管理员权限校验
});

// 管理员权限校验已移除

// 选择图标
const selectIcon = (icon) => {
  selectedIcon.value = icon;
};

// 添加分类
const addCategory = async () => {
  if (!canAdd.value || isSubmitting.value) return;
  
  try {
    isSubmitting.value = true;
    uni.showLoading({ title: '添加中' });
    
    const result = await uniCloud.callFunction({
      name: 'adminaddCategory',
      data: {
        name: categoryName.value.trim(),
        icon: selectedIcon.value,
        sort: sort.value,
        createTime: new Date()
      }
    });
    
    uni.hideLoading();
    
    if (result && result.result && result.result.code === 0) {
      uni.showToast({
        title: '添加成功',
        icon: 'success',
        duration: 1500,
        complete: () => {
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      });
    } else {
      uni.showToast({ 
        title: result.result?.message || '添加失败', 
        icon: 'none' 
      });
    }
    
  } catch (error) {
    console.error('添加分类失败:', error);
    uni.hideLoading();
    uni.showToast({ 
      title: '添加失败，请稍后重试', 
      icon: 'none' 
    });
  } finally {
    isSubmitting.value = false;
  }
};

// 导航返回
const navigateBack = () => {
  uni.navigateBack();
};
</script>

<style scoped lang="less">
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-add-category-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .page-header {
    display: flex;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    
    .header-left {
      .back-btn {
        display: flex;
        align-items: center;
        
        .header-title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin-left: 4px;
        }
      }
    }
  }
  
  .add-form {
    padding: 16px;
    
    .form-item {
      margin-bottom: 20px;
      
      .label {
        display: block;
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      .form-input {
        width: 100%;
        height: 44px;
        padding: 0 12px;
        background-color: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        font-size: 14px;
        box-sizing: border-box;
      }
      
      .char-count {
        display: block;
        text-align: right;
        font-size: 12px;
        color: #999;
        margin-top: 4px;
      }
      
      .icon-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        
        .icon-item {
          aspect-ratio: 1;
          background-color: #fff;
          border: 1px solid #e8e8e8;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.active {
            border-color: #007aff;
            background-color: #f0f8ff;
          }
          
          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
    
    .add-btn {
      width: 100%;
      height: 48px;
      font-size: 16px;
      margin-top: 24px;
    }
  }
}
</style>